<template>
	<div class="error-wrapper">
		<div class="content">
			<div class="text-btn">服务器错误</div>
			<div class="text-title">抱歉，该页面运行有误。工作人员已经在抢修，你可以返回重新操作</div>
			<el-button class="mt20 back-btn" type="primary"  size="default" @click="onBack">返回首页</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
const router = useRouter()
const onBack = ()=> {
  router.push('/')
}
</script>

<style scoped lang="scss">
.error-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	&::after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		background: url('@/assets/imgs/bg_500.jpg') no-repeat;
		background-size: 100% 100%;
		background-position: top center;
		width: 100%;
		height: 100%;
		z-index: -1;
	}
	.content {
		text-align: center;
		position: absolute;
		bottom: 80px;
		left: 50%;
    display: flex;
    flex-flow: column;
    align-items: center;
    transform: translate(-50%, 0%);
		.text-btn {
      width: 260px;
			height: 60px;
      line-height: 60px;
			background: #0052d9;
			border-radius: 41px;
			font-size: vw(26);
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
      box-shadow:4px 5px 3px 2px #042150;
		}
    .back-btn {
      margin-top: 40px;
      background: #0052d9;
    }
		.text-title {
      padding-top: 20px;
			font-size: 18px;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #0052d9;
		}
	}
}
</style>
